<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧冠8强到冠亚军预测</title>
    <!-- 添加Google Fonts字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <!-- 优先使用CDN加载HTML2Canvas库，如果失败则尝试本地文件 -->
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script>
        // 检查html2canvas是否加载成功，如果没有则尝试加载本地文件
        window.addEventListener('load', function() {
            if (typeof html2canvas === 'undefined') {
                console.error('CDN加载HTML2Canvas库失败，尝试加载本地文件...');
                
                // 尝试加载本地文件
                var script = document.createElement('script');
                script.src = 'js/html2canvas.min.js';
                script.onload = function() {
                    console.log('成功从本地加载HTML2Canvas库');
                };
                script.onerror = function() {
                    console.error('无法加载HTML2Canvas库，保存图片功能将不可用');
                    alert('图片生成功能加载失败，请查看 html2canvas-download.html 获取帮助');
                };
                document.head.appendChild(script);
            } else {
                console.log('HTML2Canvas库已成功加载');
            }
        });
    </script>
</head>
<body>
    <div class="container">
        <h1>欧冠8强到冠亚军预测</h1>
        <div id="tournament-container">
            <div class="tournament-bracket">
                <div class="bracket-container">
                    <!-- 左侧4支球队 -->
                    <div class="bracket-side left-bracket">
                        <div class="round" id="quarterfinals-left">
                            <h2>8强 - 左侧</h2>
                            <div class="matches"></div>
                        </div>
                    </div>
                    
                    <!-- 半决赛左侧 -->
                    <div class="semifinal-left">
                        <div class="round" id="semifinals-left">
                            <h2>半决赛 - 左侧</h2>
                            <div class="matches"></div>
                        </div>
                    </div>
                    
                    <!-- 决赛 -->
                    <div class="final-container">
                        <div class="round" id="final">
                            <h2>决赛</h2>
                            <div class="matches"></div>
                        </div>
                        <div id="champion">
                            <h2>冠军</h2>
                        </div>
                    </div>
                    
                    <!-- 半决赛右侧 -->
                    <div class="semifinal-right">
                        <div class="round" id="semifinals-right">
                            <h2>半决赛 - 右侧</h2>
                            <div class="matches"></div>
                        </div>
                    </div>
                    
                    <!-- 右侧4支球队 -->
                    <div class="bracket-side right-bracket">
                        <div class="round" id="quarterfinals-right">
                            <h2>8强 - 右侧</h2>
                            <div class="matches"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="controls">
                <button id="savePredictions">保存预测</button>
                <button id="resetPredictions">重置预测</button>
                <button id="exportPredictions">导出文本</button>
                <button id="saveAsImage">保存为图片</button>
                <div class="share-buttons" style="display: none;">
                    <h4>分享到:</h4>
                    <button id="shareToWeChat" class="share-btn">微信</button>
                    <button id="shareToWeibo" class="share-btn">微博</button>
                    <button id="shareToBilibili" class="share-btn">B站</button>
                    <button id="cancelShare" class="share-btn">取消</button>
                </div>
            </div>
        </div>
        
        <div class="instructions">
            <h3>使用说明</h3>
            <p>1. 使用"添加自定义队伍"按钮添加您想要的球队</p>
            <p>2. 从下拉菜单中选择每场比赛的队伍，然后点击"应用队伍选择"按钮</p>
            <p>3. 点击队伍卡片可以选择该队伍晋级到下一轮比赛</p>
            <p>4. 点击队名可以直接编辑修改球队名称（修改后自动保存）</p>
            <p>5. 读取/保存预测文件：</p>
            <ul>
                <li><strong>读取预测文件</strong> - 从本地读取之前保存的预测</li>
                <li><strong>保存预测文件</strong> - 使用默认文件名保存当前预测</li>
                <li><strong>另存为...</strong> - 使用自定义文件名保存当前预测</li>
            </ul>
            <p>系统将自动尝试读取名为 "default_predictions.json" 的默认预测文件。</p>
            <p>6. 您可以随时点击"重置预测"按钮重新开始</p>
            <p>7. 点击"导出文本"可以将您的预测导出为文本文件分享</p>
            <p>8. <strong>新功能！</strong> 点击"保存为图片"按钮可以将您的预测保存为图片</p>
            <p>9. <strong>新功能！</strong> 保存图片后可以选择分享到微信、微博或B站等社交媒体平台</p>
        </div>
    </div>
    <footer>
        <p>欧冠8强到冠亚军预测工具 | 双击index.html本地运行 | 可部署到GitHub Pages</p>
    </footer>
    <script src="js/app.js"></script>
    
    <!-- 分享提示模态框 -->
    <div id="share-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>分享到社交媒体</h2>
                <span id="close-share-modal" class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div id="share-image-container" style="text-align: center; margin-bottom: 15px;"></div>
                <p>请保存图片，然后上传到您的社交媒体账号</p>
                <div class="share-instructions">
                    <div class="share-platform">
                        <h4>微信分享步骤:</h4>
                        <ol>
                            <li>长按上方图片保存到手机</li>
                            <li>打开微信，选择发送给朋友或发朋友圈</li>
                            <li>从相册中选择刚才保存的图片</li>
                        </ol>
                    </div>
                    <div class="share-platform">
                        <h4>微博分享步骤:</h4>
                        <ol>
                            <li>长按上方图片保存到手机</li>
                            <li>打开微博，点击底部的"+"</li>
                            <li>选择图片分享，从相册中选择刚才保存的图片</li>
                            <li>添加您想要的文字说明</li>
                        </ol>
                    </div>
                    <div class="share-platform">
                        <h4>B站分享步骤:</h4>
                        <ol>
                            <li>长按上方图片保存到手机</li>
                            <li>打开B站，点击"动态"</li>
                            <li>点击"发动态"，选择图片类型</li>
                            <li>从相册中选择刚才保存的图片</li>
                        </ol>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 15px;">
                    <button id="download-share-image" class="btn btn-primary">下载图片</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>